<script lang="ts" setup>
import { timeAbbreviation } from '@/utils/time'

import { ref, defineProps, computed, onBeforeUnmount, defineExpose } from 'vue'
// import '@/assets/video.css'

import type { DefaultDetailData, Durl } from '@/TypingMore/VideoTyping'
import type { DefalutDanMu, DanMuI } from '@/TypingMore/SeasonTyping'

import VideoIcon from '@/components/VideoIcon.vue'

const props = defineProps<{
    videoData: DefaultDetailData,
    danmuData: Array<DefalutDanMu>
    playerData: Array<Durl>
    timelength: number | string
    reallyTimeLength: number
    time: number
    danmu: number
    pic: string
}>()

const sendDanmuCountData = ref<DefalutDanMu[]>([])

const directAppearance = ref<DefalutDanMu[]>([])

const myVideo = ref<HTMLVideoElement>()

const play = ref(false)

const videoPlay = ref(false)

const value = ref(0)

const isDanmuShow = ref(true)

const isGetVideoValue = ref(true)

const isVideoControlShow = ref(true)

const son = ref<Element>()

// 通过 actions 属性来定义菜单选项
interface Actions {
    text: string
}

const showPopover = ref(false)
const actions = [
    { text: '0.5' },
    { text: '1.0' },
    { text: '2.0' },
]

const selectV = (e: { text: string }) => {
    console.log(e.text)
    if (myVideo.value) {
        myVideo.value.playbackRate = Number(e.text)
    }
}

// 完成后继续给进度条赋值
const onChange = () => {
    for (let i = 0; i < props.danmuData.length; i++) {
        const item = props.danmuData[i];
        if (value.value > Number(item._p[0])) {
            item.isAdd = true
        } else {
            item.isAdd = false
        }
    }
    isGetVideoValue.value = true
}
// 拖拽滑块时阻止视频进度赋值
const onStart = () => {
    isGetVideoValue.value = false
}
// 拖拽完成后改变视频进度
const onUpdated = (value: number) => {
    if (myVideo.value !== undefined) {
        myVideo.value.currentTime = value
    }
}
// 视频进度改变滑块value值
const onPlay = (e: Event) => {
    if (isGetVideoValue.value) {
        let target = e.target as HTMLVideoElement
        value.value = target.currentTime
        isDanmuShow.value && sendDanmu()
    }
}
// 进度时间
const timeValue = computed((): string => {
    let m = Math.floor(value.value / 60)
    let s = Math.floor(value.value % 60)

    return (m >= 10 ? '' + m : '0' + m) + ':' + (s >= 10 ? '' + s : '0' + s)

})
// 视频总时长
const duration = computed((): string => {
    let m = Math.floor(props.reallyTimeLength / 60)
    let s = Math.floor(props.reallyTimeLength % 60)

    return (m >= 10 ? '' + m : '0' + m) + ':' + (s >= 10 ? '' + s : '0' + s)
})
// 视频播放 
const isVideoPlay = (): void => {
    if (myVideo.value !== undefined) {
        videoPlay.value = !videoPlay.value
        if (videoPlay.value) {
            myVideo.value.play()
        } else {
            myVideo.value.pause()
        }
    }
}
// 弹幕起飞
const sendDanmu = () => {
    for (let i = 0; i < props.danmuData.length; i++) {
        const item = props.danmuData[i];
        if (value.value > Number(item._p[0]) && !item.isAdd && parseInt(item._p[1]) <= 3) {
            sendDanmuCountData.value = [
                ...sendDanmuCountData.value,
                item
            ]
            // console.log('发送')
            item.isAdd = true
            break
        }
    }

    for (let i = 0; i < props.danmuData.length; i++) {
        const item = props.danmuData[i];
        if (value.value > Number(item._p[0]) && !item.isAdd && parseInt(item._p[1]) === 5) {
            directAppearance.value = [
                ...directAppearance.value,
                item
            ]
            item.isAdd = true
            break
        }

    }
}
// 移出滑动弹幕
const removeDanmu = () => {
    let arr = sendDanmuCountData.value.filter((item, index) => index !== 0)
    sendDanmuCountData.value = arr
}
// 移出固定不动的弹幕
const removeDirectAppearance = () => {
    let arr2 = directAppearance.value.filter((item, index) => index !== 0)
    directAppearance.value = arr2
}

const exposeTest = () => {
    console.log('这是子组件')
}

defineExpose({exposeTest})

</script>

<template>
    <div class=" relative">
        <div class="video-play-box" v-show="play">
            <span class="video-icon" v-show="!videoPlay" @click="isVideoPlay">
                <VideoIcon />
            </span>
            <img :src="pic" alt="" style="display:inline-block; width: 100vw; height: 211px;"/>
            <TransitionGroup name="move" @afterEnter="removeDanmu">
                <p class="danmu-item  danmu-text" :style="`top: ${d.is}px ; color: #${Number(d._p[3]).toString(16)};`"
                    v-for="d in sendDanmuCountData" :key="d.__text + d._p[7]" v-show="isDanmuShow">{{
                            d.__text
                    }}</p>
            </TransitionGroup>
            <TransitionGroup name="show" @afterEnter="removeDirectAppearance">
                <p class="danmu-item danmu-text top-1/2 right-1/2 translate-x-1/2 translate-y-1/2" :style="`top: ${d.is}px ; color: #${Number(d._p[3]).toString(16)};`"
                    v-for="d in directAppearance" :key="d.__text + d._p[7]" v-show="isDanmuShow">{{
                            d.__text
                    }}</p>
            </TransitionGroup>

            <video ref="myVideo" :src="playerData[0]?.url"
                style="width: 100%; height: 100%; object-fit: contain; background-color: black;" @timeupdate="onPlay"
                @ended="videoPlay = false" @click="isVideoControlShow = !isVideoControlShow"
                class=" absolute top-0 left-0"></video>
            <Transition name="control">
                <div class="video-control control-color translate-y-0" v-show="isVideoControlShow">
                    <div class=" w-6 h-6 mx-3 " v-show="!videoPlay" @click="isVideoPlay">
                        <span class=" fill-white">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
                                <path
                                    d="M17.982 9.275L8.06 3.27A2.013 2.013 0 005 4.994v12.011a2.017 2.017 0 003.06 1.725l9.922-6.005a2.017 2.017 0 000-3.45z">
                                </path>
                            </svg>
                        </span>
                    </div>
                    <div class=" w-6 h-6 mx-3" v-show="videoPlay" @click="isVideoPlay">
                        <span class="fill-white">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
                                <path
                                    d="M7 3a2 2 0 00-2 2v12a2 2 0 104 0V5a2 2 0 00-2-2zM15 3a2 2 0 00-2 2v12a2 2 0 104 0V5a2 2 0 00-2-2z">
                                </path>
                            </svg>
                        </span>
                    </div>
                    <div class=" flex items-center justify-center mr-3 text-xs">{{ timeValue }}</div>
                    <div class=" flex items-center justify-center flex-1 mr-3">
                        <van-slider bar-height="3px" active-color="#fb7299" @drag-start="onStart" v-model="value"
                            @change="onChange" @update:model-value="onUpdated" :max="reallyTimeLength">
                            <template #button>
                                <div class="custom-button relative">{{ 1 }}
                                    <div class=" absolute top-0 -left-0.5 w-5 h-4 translate-y-0.5">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
                                            <path
                                                d="M16.118 3.667h.382a3.667 3.667 0 013.667 3.667v7.333a3.667 3.667 0 01-3.667 3.667h-11a3.667 3.667 0 01-3.667-3.667V7.333A3.667 3.667 0 015.5 3.666h.382L4.95 2.053a1.1 1.1 0 011.906-1.1l1.567 2.714h5.156L15.146.953a1.101 1.101 0 011.906 1.1l-.934 1.614z"
                                                fill="#333"></path>
                                            <path
                                                d="M5.561 5.194h10.878a2.2 2.2 0 012.2 2.2v7.211a2.2 2.2 0 01-2.2 2.2H5.561a2.2 2.2 0 01-2.2-2.2V7.394a2.2 2.2 0 012.2-2.2z"
                                                fill="#fff"></path>
                                            <path
                                                d="M6.967 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1zM15.033 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1z"
                                                fill="#333"></path>
                                        </svg>
                                    </div>
                                </div>
                            </template>
                        </van-slider>
                    </div>
                    <div class=" flex items-center justify-center text-xs ml-3">{{ duration }}</div>
                    <van-popover style="background-color:transparent;" v-model:show="showPopover" theme="dark"
                        placement="top" @select="selectV" :actions="actions">
                        <template #reference>
                            <van-button type="primary">倍数</van-button>
                        </template>
                    </van-popover>
                    <!-- <div class="mr-3 text-xs">倍数</div> -->
                    <div class="  w-6 h-6 mr-3" @click="isDanmuShow = !isDanmuShow, sendDanmuCountData = []" v-show="isDanmuShow">
                        <span>
                            <svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
                                <g fill="none" fill-rule="evenodd">
                                    <path
                                        d="M11.45 16.844a.688.688 0 010-.972l.217-.216a.688.688 0 01.972 0l2.287 2.285 5.455-5.454a.687.687 0 01.972 0l.216.216a.687.687 0 010 .972l-6.157 6.158a.688.688 0 01-.896.066l-.077-.066-2.989-2.99z"
                                        fill="#FB7299" fill-rule="nonzero"></path>
                                    <path
                                        d="M15.103 1.847a.924.924 0 01.211 1.29l-1.156 1.608c.774.02 1.609.045 2.504.076 1.647.058 2.933 1.348 3.166 2.98.101.706.168 3.2.2 4.12a.63.63 0 11-1.26.043c-.03-.877-.093-3.326-.188-3.985-.147-1.027-.926-1.861-1.962-1.898-2.243-.08-4.1-.12-5.569-.12-1.468 0-3.324.04-5.567.12a2.143 2.143 0 00-2.045 1.837c-.14.971-.21 2.178-.21 3.618 0 1.728.101 3.21.302 4.443.162.997 1 1.746 2.01 1.796 1.719.085 3.573.128 5.56.128a.63.63 0 110 1.26 114.2 114.2 0 01-5.623-.13 3.403 3.403 0 01-3.19-2.852c-.213-1.306-.319-2.853-.319-4.645 0-1.495.074-2.76.222-3.796A3.403 3.403 0 015.438 4.82c.762-.027 1.48-.05 2.155-.067L6.496 3.11a.924.924 0 011.539-1.025l1.62 2.432a.927.927 0 01.098.192c.48-.005.929-.009 1.347-.009h-.104.108H11c.3 0 .617.002.95.005a.963.963 0 01.115-.216l1.748-2.431a.924.924 0 011.29-.211zm-5.51 5.756v3.106H7.776l-.14 1.361h2.016c0 1.735-.06 2.894-.161 3.48-.121.584-.636.907-1.553.967-.262 0-.525-.02-.807-.04l-.272-.978c.262.03.544.05.827.05.504 0 .786-.161.857-.484.07-.323.11-1.018.11-2.087H6.568l.283-3.166h1.704V8.5H6.658v-.898h2.934zm4.325-.453l.998.353a7.875 7.875 0 01-.685 1.3h1.17v4.245h-2.078v.777h2.47v.979l-.008.009h-2.464l-.004-.005a1.68 1.68 0 00-2.375-.094l-.099.099h-.948v-.988h2.4v-.777h-2.037V8.803h1.21a7.75 7.75 0 00-.756-1.25l.958-.323c.282.404.534.827.746 1.291l-.635.282h1.391c.282-.514.524-1.069.746-1.653zm.555 4.235h-1.15v.786h1.15v-.786zm-2.178 0h-1.1v.786h1.1v-.786zm0-1.694h-1.1v.826h1.1v-.826zm2.178 0h-1.15v.826h1.15v-.826z"
                                        fill="#FFF" fill-rule="nonzero"></path>
                                    <path stroke="#FB7199" stroke-width="1.38" stroke-linecap="round"
                                        stroke-linejoin="round" d="M12.299 16.348l2.71 2.782 5.366-5.093"></path>
                                </g>
                            </svg>
                        </span>
                    </div>
                    <div class="w-6 h-6 mr-3" @click="isDanmuShow = !isDanmuShow, directAppearance = [] " v-show="!isDanmuShow">
                        <span>
                            <svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M16.882 12.89a3.991 3.991 0 110 7.983 3.991 3.991 0 010-7.982zm-2.405 2.697a2.73 2.73 0 003.7 3.7l-3.7-3.7zm.626-13.74a.924.924 0 01.211 1.29l-1.158 1.61c.751.019 1.558.044 2.422.074a3.403 3.403 0 013.249 2.919c.148 1.036.222 2.3.222 3.796a.63.63 0 01-1.26 0c0-1.44-.07-2.647-.21-3.618a2.143 2.143 0 00-2.045-1.837 166.897 166.897 0 00-5.527-.12c-1.46.001-3.303.041-5.525.12a2.143 2.143 0 00-2.045 1.837c-.14.971-.21 2.178-.21 3.618 0 1.728.101 3.21.302 4.443.162.997 1 1.746 2.01 1.796 1.719.085 3.573.128 5.56.128a.63.63 0 110 1.26 114.2 114.2 0 01-5.623-.13 3.403 3.403 0 01-3.19-2.852c-.213-1.306-.319-2.853-.319-4.645 0-1.495.074-2.76.222-3.796A3.403 3.403 0 015.438 4.82c.762-.027 1.48-.05 2.155-.067L6.496 3.11a.924.924 0 011.468-1.118l.07.093 1.62 2.432a.927.927 0 01.099.192c.32-.004.626-.006.918-.008l.325-.001.252.001c.226 0 .46.003.702.005a.914.914 0 01.115-.217l1.748-2.431a.924.924 0 011.29-.211zm1.779 12.304c-.582 0-1.121.182-1.564.492l3.803 3.803a2.73 2.73 0 00-2.239-4.295zm-7.28-6.553v3.106H7.787l-.14 1.361h2.016c0 1.734-.06 2.894-.161 3.479-.121.585-.636.907-1.553.968-.262 0-.525-.02-.807-.04l-.272-.979c.262.03.544.05.827.05.504 0 .786-.16.857-.483.07-.323.11-1.019.11-2.087H6.578l.283-3.167h1.704v-1.31H6.668v-.898h2.934zm4.326-.454l.998.353a7.875 7.875 0 01-.685 1.301h1.17v3.26a5.032 5.032 0 00-1.797.984l-.28.001-.001.258a5.053 5.053 0 00-1.048 1.507h-2.38v-.988h2.4v-.777h-2.037V8.798h1.21a7.75 7.75 0 00-.756-1.25l.958-.323c.282.403.534.827.746 1.29l-.635.283h1.391c.282-.514.524-1.069.746-1.654zm.555 4.235h-1.15v.787h1.15v-.787zm-2.178 0h-1.1v.787h1.1v-.787zm0-1.694h-1.1v.827h1.1v-.827zm2.178 0h-1.15v.827h1.15v-.827z"
                                    fill="#FEFEFE" fill-rule="evenodd"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            </Transition>
        </div>
        <span class="video-icon" @click="play = true, isVideoPlay()">
            <VideoIcon />
        </span>
        <img :src="pic" alt=""  style="display:inline-block; width: 100vw; height: 211px;">
        <div class="danmu-list video-danmu">
            <div class=" flex p-1">
                <div class=" ml-3">
                    <span></span>
                    <span>{{ timeAbbreviation(time) + '观看 ' }}</span>
                </div>
                <div class=" ml-3">
                    <span></span>
                    <span>{{ timeAbbreviation(danmu) + '弹幕' }}</span>
                </div>
            </div>
            <div class="mr-3 p-1">{{ timelength }}</div>
        </div>
    </div>
</template>

<style>
.van-button--primary {
    background-color: transparent;
    border: transparent;
}

.control-enter-active,
.control-leave-active {
    transition: all .4s linear;
}

.control-enter-from,
.control-leave-to {
    transform: translateY(100%);
}

.control-enter-to,
.control-leave-from {
    transform: translateY(0%);
}

.move-enter-active,
.show-enter-active {
    transition: all 5s linear;
}

.show-enter-from {
    opacity: .99;
}

.show-enter-to {
    opacity: 1;
}

.move-enter-from {
    right: 0;
    transform: translateX(100%);
}

.move-enter-to {
    right: 100%;
    transform: translateX(-100%);
}
</style>